<template>
    <div class="h-full">
      <k-form-build :value="configJsonData" :dynamicData="dynamicData" />
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        dynamicData: {
          funName: this.printHelloWorld
        },
        configJsonData: {
	"list": [
		{
			"type": "flex",
			"label": "flex布局",
			"columns": [
				{
					"width": "w-1/4",
					"margin": "",
					"marginTop": "",
					"marginRight": "",
					"marginBottom": "",
					"marginLeft": "",
					"padding": "",
					"paddingTop": "",
					"paddingRight": "",
					"paddingBottom": "",
					"paddingLeft": "",
					"positionTop": "",
					"positionRight": "",
					"positionBottom": "",
					"positionLeft": "",
					"positionZIndex": "",
					"absolute": false,
					"list": [
						{
							"type": "tree",
							"label": "树形",
							"icon": "icon-gallery",
							"options": {
								"multiple": false,
								"disabled": false,
								"clearable": true,
								"showSearch": false,
								"showLabel": false,
								"noFormItem": true
							},
							"model": "tree_1691491475908",
							"key": "tree_1691491475908",
							"rules": [
								{
									"required": false,
									"message": "必填项"
								}
							],
							"className": {
								"margin": "",
								"marginTop": "",
								"marginRight": "",
								"marginBottom": "",
								"marginLeft": "",
								"padding": "",
								"paddingTop": "",
								"paddingRight": "",
								"paddingBottom": "",
								"paddingLeft": "",
								"borderWidth": "border",
								"borderStyle": "border-solid",
								"borderColor": "border-gray-300",
								"borderRadius": "rounded",
								"backGroundColor": ""
							}
						}
					],
					"flex": ""
				},
				{
					"width": "w-3/4",
					"margin": "",
					"marginTop": "",
					"marginRight": "",
					"marginBottom": "",
					"marginLeft": "",
					"padding": "",
					"paddingTop": "",
					"paddingRight": "",
					"paddingBottom": "",
					"paddingLeft": "",
					"positionTop": "",
					"positionRight": "",
					"positionBottom": "",
					"positionLeft": "",
					"positionZIndex": "",
					"list": [
						{
							"type": "flex",
							"label": "flex布局",
							"icon": "icon-qiapian",
							"columns": [
								{
									"width": "w-60",
									"margin": "",
									"marginTop": "",
									"marginRight": "",
									"marginBottom": "",
									"marginLeft": "",
									"padding": "",
									"paddingTop": "",
									"paddingRight": "",
									"paddingBottom": "",
									"paddingLeft": "",
									"positionTop": "",
									"positionRight": "",
									"positionBottom": "",
									"positionLeft": "",
									"positionZIndex": "",
									"absolute": false,
									"list": [
										{
											"type": "input",
											"label": "条件1",
											"icon": "icon-write",
											"options": {
												"type": "text",
												"width": "100%",
												"defaultValue": "",
												"placeholder": "请输入",
												"clearable": false,
												"maxLength": null,
												"addonBefore": "",
												"addonAfter": "",
												"showLabel": true,
												"hidden": false,
												"disabled": false,
												"noFormItem": false
											},
											"model": "input_1691491562934",
											"key": "input_1691491562934",
											"help": "",
											"rules": [
												{
													"required": false,
													"message": "必填项"
												}
											]
										}
									],
									"flex": ""
								},
								{
									"width": "w-60",
									"margin": "",
									"marginTop": "",
									"marginRight": "",
									"marginBottom": "",
									"marginLeft": "",
									"padding": "",
									"paddingTop": "",
									"paddingRight": "",
									"paddingBottom": "",
									"paddingLeft": "",
									"positionTop": "",
									"positionRight": "",
									"positionBottom": "",
									"positionLeft": "",
									"positionZIndex": "",
									"list": [
										{
											"type": "input",
											"label": "条件2",
											"icon": "icon-write",
											"options": {
												"type": "text",
												"width": "100%",
												"defaultValue": "",
												"placeholder": "请输入",
												"clearable": false,
												"maxLength": null,
												"addonBefore": "",
												"addonAfter": "",
												"showLabel": true,
												"hidden": false,
												"disabled": false,
												"noFormItem": false
											},
											"model": "input_1691491621026",
											"key": "input_1691491621026",
											"help": "",
											"rules": [
												{
													"required": false,
													"message": "必填项"
												}
											]
										}
									]
								},
								{
									"width": "w-60",
									"margin": "",
									"marginTop": "",
									"marginRight": "",
									"marginBottom": "",
									"marginLeft": "",
									"padding": "",
									"paddingTop": "",
									"paddingRight": "",
									"paddingBottom": "",
									"paddingLeft": "",
									"positionTop": "",
									"positionRight": "",
									"positionBottom": "",
									"positionLeft": "",
									"positionZIndex": "",
									"list": [
										{
											"type": "input",
											"label": "条件3",
											"icon": "icon-write",
											"options": {
												"type": "text",
												"width": "100%",
												"defaultValue": "",
												"placeholder": "请输入",
												"clearable": false,
												"maxLength": null,
												"addonBefore": "",
												"addonAfter": "",
												"showLabel": true,
												"hidden": false,
												"disabled": false,
												"noFormItem": false
											},
											"model": "input_1691491624019",
											"key": "input_1691491624019",
											"help": "",
											"rules": [
												{
													"required": false,
													"message": "必填项"
												}
											]
										}
									]
								},
								{
									"width": "",
									"margin": "",
									"marginTop": "",
									"marginRight": "",
									"marginBottom": "",
									"marginLeft": "",
									"padding": "",
									"paddingTop": "",
									"paddingRight": "",
									"paddingBottom": "",
									"paddingLeft": "",
									"positionTop": "",
									"positionRight": "",
									"positionBottom": "",
									"positionLeft": "",
									"positionZIndex": "",
									"list": [
										{
											"type": "button",
											"label": "搜索",
											"icon": "icon-button-remove",
											"options": {
												"type": "primary",
												"handle": "submit",
												"dynamicFun": "",
												"width": "100%",
												"showLabel": false,
												"hidden": false,
												"disabled": false
											},
											"key": "button_1691491611236",
											"className": {
												"icon": ""
											}
										}
									]
								}
							],
							"options": {
								"noFormItem": true
							},
							"className": {
								"fontSize": "",
								"backGroundColor": "",
								"height": "",
								"display": "flex",
								"justifyContent": "",
								"alignContent": "",
								"justifyItems": "",
								"alignItems": "",
								"margin": "",
								"marginTop": "",
								"marginRight": "",
								"marginBottom": "mb-2.5",
								"marginLeft": "",
								"padding": "",
								"paddingTop": "pt-4",
								"paddingRight": "",
								"paddingBottom": "",
								"paddingLeft": "",
								"borderWidth": "border",
								"borderWidthTop": "",
								"borderWidthRight": "",
								"borderWidthBottom": "",
								"borderWidthLeft": "",
								"borderStyle": "border-solid",
								"borderColor": "border-gray-300",
								"borderRadius": "rounded",
								"borderColorTop": "",
								"borderColorRight": "",
								"borderColorBottom": "",
								"borderColorLeft": "",
								"positionTop": "",
								"positionRight": "",
								"positionBottom": "",
								"positionLeft": "",
								"positionZIndex": "",
								"relative": false,
								"absolute": false,
								"fixed": false,
								"spaceX": "space-x-2",
								"spaceY": "",
								"wrap": "",
								"shadow": "",
								"shadowColor": ""
							},
							"key": "flex_1691491526141",
							"model": "flex_1691491526141"
						},
						{
							"type": "flex",
							"label": "flex布局",
							"icon": "icon-qiapian",
							"columns": [
								{
									"width": "",
									"margin": "",
									"marginTop": "",
									"marginRight": "",
									"marginBottom": "",
									"marginLeft": "",
									"padding": "",
									"paddingTop": "",
									"paddingRight": "",
									"paddingBottom": "",
									"paddingLeft": "",
									"positionTop": "",
									"positionRight": "",
									"positionBottom": "",
									"positionLeft": "",
									"positionZIndex": "",
									"absolute": false,
									"list": [
										{
											"type": "list",
											"label": "表格",
											"icon": "icon-gallery",
											"options": {
												"multiple": false,
												"disabled": false,
												"clearable": true,
												"showSearch": false,
												"showLabel": false,
												"noFormItem": true
											},
											"model": "list_1691491704875",
											"key": "list_1691491704875",
											"rules": [
												{
													"required": false,
													"message": "必填项"
												}
											],
											"className": {
												"margin": "",
												"marginTop": "",
												"marginRight": "",
												"marginBottom": "",
												"marginLeft": "",
												"padding": "",
												"paddingTop": "",
												"paddingRight": "",
												"paddingBottom": "",
												"paddingLeft": "",
												"borderWidth": "",
												"borderStyle": "",
												"borderColor": "",
												"borderRadius": "",
												"backGroundColor": ""
											}
										}
									],
									"flex": ""
								}
							],
							"options": {
								"noFormItem": true
							},
							"className": {
								"fontSize": "",
								"backGroundColor": "",
								"height": "",
								"display": "",
								"justifyContent": "",
								"alignContent": "",
								"justifyItems": "",
								"alignItems": "",
								"margin": "",
								"marginTop": "",
								"marginRight": "",
								"marginBottom": "",
								"marginLeft": "",
								"padding": "",
								"paddingTop": "",
								"paddingRight": "",
								"paddingBottom": "",
								"paddingLeft": "",
								"borderWidth": "",
								"borderWidthTop": "",
								"borderWidthRight": "",
								"borderWidthBottom": "",
								"borderWidthLeft": "",
								"borderStyle": "",
								"borderColor": "",
								"borderRadius": "",
								"borderColorTop": "",
								"borderColorRight": "",
								"borderColorBottom": "",
								"borderColorLeft": "",
								"positionTop": "",
								"positionRight": "",
								"positionBottom": "",
								"positionLeft": "",
								"positionZIndex": "",
								"relative": false,
								"absolute": false,
								"fixed": false,
								"spaceX": "",
								"spaceY": "",
								"wrap": "",
								"shadow": "",
								"shadowColor": ""
							},
							"key": "flex_1691491695962",
							"model": "flex_1691491695962"
						}
					]
				}
			],
			"options": {
				"noFormItem": true
			},
			"className": {
				"fontSize": "",
				"backGroundColor": "",
				"height": "",
				"display": "flex",
				"justifyContent": "",
				"alignContent": "",
				"justifyItems": "",
				"alignItems": "",
				"margin": "",
				"marginTop": "",
				"marginRight": "",
				"marginBottom": "",
				"marginLeft": "",
				"padding": "p-2.5",
				"paddingTop": "",
				"paddingRight": "",
				"paddingBottom": "",
				"paddingLeft": "",
				"borderWidth": "",
				"borderWidthTop": "",
				"borderWidthRight": "",
				"borderWidthBottom": "",
				"borderWidthLeft": "",
				"borderStyle": "",
				"borderColor": "",
				"borderRadius": "",
				"borderColorTop": "",
				"borderColorRight": "",
				"borderColorBottom": "",
				"borderColorLeft": "",
				"positionTop": "",
				"positionRight": "",
				"positionBottom": "",
				"positionLeft": "",
				"positionZIndex": "",
				"relative": false,
				"absolute": false,
				"fixed": false,
				"spaceX": "space-x-3",
				"spaceY": "",
				"wrap": "",
				"shadow": "",
				"shadowColor": ""
			},
			"key": "flex_1691491422700",
			"model": "flex_1691491422700"
		}
	],
	"config": {
		"layout": "horizontal",
		"labelCol": {
			"xs": 4,
			"sm": 4,
			"md": 4,
			"lg": 4,
			"xl": 4,
			"xxl": 4
		},
		"labelWidth": 100,
		"labelLayout": "flex",
		"wrapperCol": {
			"xs": 18,
			"sm": 18,
			"md": 18,
			"lg": 18,
			"xl": 18,
			"xxl": 18
		},
		"hideRequiredMark": false,
		"customStyle": "",
		"formToggle": true,
		"pagesBg": "",
		"login": false,
		"containerCenter": false,
		"position": "",
		"repeat": "",
		"size": "",
		"top": "",
		"right": "",
		"bottom": "",
		"left": ""
	}
}
      
      
      }
    },
    mounted() {
  
    },
    methods: {
      printHelloWorld() {
        alert("hello world");
      }
    }
  };
  </script>
  
  <style lang="less">
  
  </style>
  